<!-- <template> -->
  <!-- <div id="app"> -->
    <!-- <Parent/> -->
    <!-- <chacao> -->
      <!-- 插槽基本语法   在组件的中间书写内容 通过slot 加载进去 -->
      <!-- 具名插槽 -->
        <!-- v-slot 指令名字   header 指令参数 -->
      <!-- <template v-slot:header> -->
      <!-- <header>标题</header> -->
      <!-- </template> -->

      <!-- <template v-slot:main="{s}"> -->
      <!-- <main >主体部分:{{s}}</main> -->
      <!-- </template> -->

      <!-- <template v-slot:footer> -->
      <!-- <footer>底部</footer> -->
      <!-- </template> -->

      <!-- 默认的分发的内容 -->
      <!-- 解析就必须标准化 不解析变量名随便写 -->
      <!-- <template v-slot="{v}"> -->
      <!-- <h1>哈哈哈~ 大河之水天上来-{{v.name}}</h1> -->
      <!-- </template> -->

    <!-- </chacao> -->
  <!-- </div> -->
<!-- </template> -->

<!-- <script> -->
<!-- //引入Parent模块  变量名随便写 -->
<!-- import  Parent from './Parent.vue' -->
<!-- import chacao from './chacao.vue'; -->

<!-- export default { -->
  <!-- name: "App", -->

  <!-- // 注册组件 -->
  <!-- components: { -->
    <!-- //接收上面变量名 -->
    <!-- Parent, -->
    <!-- chacao -->
<!-- } -->
  
<!-- }; -->
<!-- </script> -->



<!-- <template>
  <div id="app">
<zujian/>
  </div>
</template>
<script>
import zujian from './zujian.vue'
export default {
  components:{
    zujian
  }
}

</script> -->



<!-- <template>
  <div id="app">
<Module/>
<ModuleOne/>
<Moduletwo/>
  </div>
</template>
<script>

import Module from './Module.vue'
import ModuleOne from './ModuleOne.vue'
import Moduletwo from './Moduletwo.vue'
export default{
    components: { Module,
    ModuleOne,
    Moduletwo 
    
    }
    
}


</script>

<style>
 body{
            position: relative;
            /* background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.2qqtouxiang.com%2Fpic%2FBZ7863_07.jpg&refer=http%3A%2F%2Fimg.2qqtouxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660295205&t=f11ae23b18698247b9035efd8818e066"); */
        }
        #app {
            width: 600px;
            margin: 10px auto;
            border: 5px solid darkorchid;
            background: #fff;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #c84ed5;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
            color: rgb(75, 101, 220);
        }
        #ts{
            color: red;
        }
        #img{
            width: 350px;
            height: 410px;
            position: absolute;
            right: 20px;
            opacity:0.8;            

        }
        #img1{
            width: 350px;
            height: 410px;
            position: absolute;
            left: 20px;
            opacity:0.8;            
        }

</style> -->

<!-- <template>
  <div id="app">
<Module0/>
  </div>

</template>

<script>
import Module0 from "./sp/shangpin/index.vue";
export default {
  components:{
    Module0
  }
}

</script> -->


<!-- <template> -->
  <!-- <div id="app"> -->
    <!-- <Parent></Parent> -->
    <!-- <Other></Other> -->
   <!-- <Tab></Tab> -->
   <!-- <Shop></Shop> -->
   <!-- </div> -->
<!-- </template>> -->
   
<!-- <script> -->
  <!-- // import Parent from './Parent.vue'
// import Other from './components/other/index.vue'
// import Tab from "./components/Tab"
// import Shop from "./components/Shop"


  // export default {
    // name: 'App',
    // components:{
    // Parent,
    // Other,
    // Tab,
    // Shop
}
   
  } -->
<!-- </script> -->

<template>
  <div class="todo-container">
    <div class="todo-wrap">

      <TodoHeader :addTodo="addTodo"/>
      <TodoList :todos="todos" :delTodo="delTodo"/>
      <TodoFooter1></TodoFooter1>
      <TodoFooter :checkedAll="checkedAll" :todosNum="todosNum" :todosCompleteNum="todosCompleteNum" :isAllChecked="isAllChecked" :delAllCompleteTodo="delAllCompleteTodo"/>

    </div>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader';
import TodoList from './components/TodoList';
import TodoFooter from './components/TodoFooter';
import TodoFooter1 from './components/TodoFooter1.vue';

export default {
  data(){
    return{
      todos: [
        { id: '001',  title: '吃饭', complete: true },
        { id: '002', title: '睡觉', complete: false },
        { id: '003', title: '敲代码', complete: true }
      ]
    }
  },
  components:{ TodoHeader, TodoList, TodoFooter, TodoFooter1 },
  methods:{
    /*新增*/
    addTodo(todo){
      this.todos.unshift(todo);
    },
    /*删除*/
    delTodo(id){
      this.todos = this.todos.filter(function (value) {
        return value.id==id?false:true;
      });
    },
    /*删除*/
    updateTodo(id){
      this.todos.forEach(function(item){
        if(item.id==id){
          item.complete = !item.complete;
          return;
        }
      });
    },
    /*删除已完成*/
    delAllCompleteTodo(){
      this.todos = this.todos.filter(function (value) {
        return value.complete?false:true;
      });
    },
    /*判断是否全选*/
    isAllChecked(){
      return this.todos.length > 0 && this.todos.every(function (x) {
        return x.complete
      });
    },
    /*全选*/
    checkedAll(isShecked){
      this.todos.forEach(function(item){
        item.complete = isShecked;
      });
    },
    /*总数 */
    todosNum(){
      return this.todos.length;
    },
    /*完成数 */
    todosCompleteNum(){
      return this.todos.reduce(function(accumulator, currentValue){
        return accumulator+(currentValue.complete ? 1 : 0)
      },0);
    },
  }
}
</script>

<style>
/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
body{
  /* background:darkgrey */
}
</style>
